// 注册组件
<template>
  <div class="body">
      <div class="card-body">
        <el-form autocomplete="on" :model="regForm" ref="regForm">
            <el-form-item prop="username" class="username-item">
              <el-input type="text" placeholder="账号长度为(1-11)位" v-model="regForm.username" name="username">
                <template slot="prepend">账号</template>
              </el-input>
            </el-form-item>
            <!-- 账号输入框 -->

            <el-form-item prop="password" class="password-item">
              <el-input type='password' placeholder="密码长度为(1-16)位" v-model="regForm.password">
                <template slot="prepend">密码</template>
              </el-input>
            </el-form-item>
            <!-- 密码输入框 -->

            <el-form-item prop="repassword" class="password-item">
              <el-input type='password' placeholder="请重复输入密码" v-model="regForm.repwd">
                <template slot="prepend">重复密码</template>
              </el-input>
            </el-form-item>
            <!-- 重复密码输入框 -->

            <el-form-item prop="password" v-if="logidentify">
              <el-row>
                <el-col :span="12">
                  <div @click="refreshCode">
                    <validation :identifyCode="identifyCode"></validation>
                  </div>
                </el-col>
                <el-col :span="12">
                  <el-input
                    type="text"
                    class="code"
                    v-model="code"
                    placeholder="验证码"
                    @keyup.enter.native="handleReg"
                  >
                  </el-input>
                </el-col>
              </el-row>
            </el-form-item>
            <!-- 验证码 -->

            <el-row>
              <el-col :span="6" :offset="18">
                <el-button class="SubBut" type="primary" plain @click="handleReg">注册</el-button>
              </el-col>
            </el-row>
            <!-- 保存密码选项 -->
        </el-form>
      </div>
  </div>
</template>

<script>
import validation from './validation'

export default{
  components:
  {
    validation
  },
  data () {
    return {
      identifyCodes: '1234567890',
      identifyCode: '',
      logidentify: true,
      code: '', // text框输入的验证码
      regForm: {
        username: '',
        password: '',
        repwd:''
      }
    }
  },
  methods: {
    randomNum (min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },

    refreshCode () {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },

    makeCode (o, len) {
      for (let i = 0; i < len; i++) {
        this.identifyCode += o[this.randomNum(0, this.identifyCodes.length)]
      }
      // console.log(this.identifyCode)
    },
    loginerror(errormessage){
      this.refreshCode()
      this.$message.error(errormessage);
      this.code=""
    },
    // 错误提示
    handleReg () {
      if(this.regForm.username===""){
        this.loginerror("请输入账号")
        return false
      }
      if(this.regForm.password===""){
        this.loginerror("请输入密码")
        return false
      }
      if(this.regForm.username.length>11){
        this.loginerror("账号最大长度为11位")
        return false
      }
      if(this.regForm.password.length>16){
        this.loginerror("密码最大长度为16位")
        return false
      }
      if(this.regForm.password!=this.regForm.repwd){
        this.loginerror("两次密码输入不一致")
        return false
      }
      if(this.code!=this.identifyCode){
        if(this.code==="") this.loginerror("请输入验证码")
        else this.loginerror("验证码错误")
        return false
      }
      var reg=/\W/ // 正则表达式，搜索非字字符
      if(this.regForm.username.search(reg)!=-1 || this.regForm.password.search(reg)!=-1){
        this.loginerror("密码或账号中仅允许出现大小写字母、数字与下划线")
        return false
      }
      
      this.$refs.regForm.validate(valid => {
        if (valid) {
          this.$store.dispatch('Reg', this.regForm)
            .then(response => {
              let code = response.data.code
              if (code === 200) {
                this.$router.push({
                  name: 'login',
                  params: { data: response.data.data }
                })// 成功后跳转至主页面
                this.$message({
                  message:"欢迎"+response.data.data,
                  type: 'success'
                })
              } else {
                this.loginerror(response.data.message)
                return false
              }
              // console.log(code)
            })
            .catch(() => {

            })
        } else {
          // eslint-disable-next-line no-console
          this.loginerror('参数验证不合法！')
          return false
        }
      })
    }
  },
  mounted () {
    this.refreshCode()
  }
}
</script>

<style scoped>
</style>
